<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>关注</title>
    <link rel="Shortcut Icon" href="/static/images/logoIcon.icon">
    <link rel="stylesheet" href="https://cdn.staticfile.org/font-awesome/4.7.0/css/font-awesome.css">
    <link rel="stylesheet" type="text/css" href="/static/css/collectBlog.css">
    <!--<link rel="stylesheet" href="/static/css/bootstrap.min.css">-->
    <script type="text/javascript" src="/static/js/jquery-3.4.0.js"></script>
    <script type="text/javascript" src="/static/js/attention.js"></script>

</head>
<body th:style="'background-color : ' + ${session.config.color1}">
<!--顶部导航部分-->
<div class="nav">
    <!--导航居中样式-->
    <div class="navCenter">
        <div class="navLeft">
            <!--logo-->
            <div class="logo">
                <a href="/user/index"><img src="/static/images/logo.png"/></a>
            </div>
            <!--主页-->
            <div class="mainPage"><a href="/user/index">首页</a></div>

            <!--左侧未登录导航-->
            <!--下载App-->
            <div class="download" th:if="${session.user==null}"><a href="">下载App</a></div>
            <!--下载App隐藏部分-->
            <div class="downloadHide">
                <img src="/static/images/QRCode.jpg">
            </div>
            <!--左侧登录后导航将下载App换为关注和消息部分-->
            <!--关注-->
            <div class="attention" th:if="${session.user!=null}"><a href="/focus/focusInformation">关注</a></div>
            <!--消息-->
            <div class="information" th:if="${session.user!=null}"><a href="/message/getCommentMessage">消息</a></div>
            <div th:if="${session.message.all!=0}" style="display: inline-block"><div class="informationIcon" th:text="${session.message.all}"></div></div>

            <!--搜索部分-->

            <div class="search">
                <form action="/serialize/selectBS" method="get">
                    <input type="text" name="name" class="navInput"/>
                    <button class="navBtn" type="submit"><i class="fa fa-search"></i></button>
                </form>
            </div>
        </div>

        <!--<a href="/user/sign">登录</a>-->
        <!--右侧导航-->
        <div class="navRight">
            <!--右侧未登录导航有登录注册部分-->
            <div class="signIn" th:if="${session.user==null}">
                <a href="/user/sign">登录</a>
            </div>

            <!--<ul>-->
            <!--<li><a th:if="${session.user==null}" href="/user/sign">登录</a></li>-->
            <!--<li><a th:if="${session.user!=null}" href="/user/loginOut">退出</a></li>-->
            <!--</ul>-->
            <div class="register" th:if="${session.user==null}"><a href="/user/registerPage">注册</a></div>
            <!--右侧已登录导航有个人信息图片部分-->
            <!--个人信息图片部分-->

            <div th:if="${session.user!=null}" class="myselfPic"><img th:src="${session.user.uHead}">
                <i class="fa fa-sort-down" id="myselfDown"></i>
                <i class="fa fa-sort-up" id="myselfUp"></i>
            </div>
            <!--登录后显示个人信息图片下拉菜单-->
            <ul class="myselfDownList" style="padding-left: 0;margin-top: 0">
                <a href="/user/PersonalPage">
                    <li><i class="fa fa-user"></i> 个人中心</li>
                </a>
                <a href="/user/personalData">
                    <li><i class="fa fa-drivers-license-o"></i> 我的资料</li>
                </a>
                <a href="/focus/focusInformation">
                    <li><i class="fa fa-check-square-o"></i> 我的收藏</li>
                </a>
                <a href="/message/getCommentMessage">
                    <li><i class="fa fa-group"></i> 我的消息</li>
                </a>
                <li class="loginOut" style="cursor: pointer"><i class="fa fa-reply-all"></i> 退出</li>
            </ul>
            <!--写文章按钮-->
            <a href="/test/editor">
                <div class="write">写文章</div>
            </a>

        </div>
    </div>
</div>

<!-- 关注主体部分 -->
<div class="container">
    <div class="row">
        <!-- 侧边栏 -->
        <div class="sidebar">
            <div class="type-atten"><i class="fa fa-user" style="color: black;padding-right: 15px"> </i>
                关注的作者
            </div>

        <!--关注的名称  -->
        <ul class="text-atten">
            <li th:each="UserFocus:${UserFocus}">
                <div>
                    <a href="" class="photo-atten">
                        <img th:src="${UserFocus.user.uHead}" >
                    </a>
                    <div class="informationed">
                        <a href="" class="infor-name" th:text="${UserFocus.user.uName}">用户的姓名</a>
                        <p th:text="${UserFocus.user.uSingnature}">用户的简介</p>
                        <a href="" >
                            <span class="much" th:text="${#dates.format(UserFocus.foucus.fTime,'yyyy-MM-dd HH:mm:ss')}">关注时间</span>
                        </a>
                    </div>
                </div>
            </li>
        </ul>
    </div>
    </div>
        <!-- 关注内容文章 -->
        <div class=" col-nav">
            <div>
                <ul class="type-menu">
                    <li>
                        <i class="fa fa-file-text"></i>
                        <a href="/focus/focusInformation">收藏的博客</a>
                    </li>
                    <li>
                        <i class="fa fa-th-large"></i>
                        <a href="/collection/showCollectionBlog" style="color: #b7704f">收藏的连载</a>
                    </li>
                </ul>
            </div>
            <div class="collectBlog" th:each="serialize:${serialize}">
                <div class="collectBlogCenter" >
                    <div class="img">
                        <img th:src="${serialize.sAddress}">
                    </div>
                    <div class="bookInformation" >
                        <div class="bookName0">
                            <div class="bookName" th:text="${serialize.sTitle}">书名</div>
                            <span class="bookDelete">取消收藏</span>
                        </div>
                        <div class="bookText" th:text="${serialize.sIntroduction}">书籍简介书籍简介书籍简介书籍简介</div>
                        <div class="bookTime" th:text="${serialize.sTime}">书籍发表的时间</div>
                        <div class="bookMoney" th:text="${serialize.sPrice}">钱数：书籍钱数</div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

</body>
</html>